<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>书籍展示</title>

    <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
</head>

<body>
    <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>

    <div id="wrap">
        <div class="content" >
            <div class="col-sm-5 displayImg">
                <div class="col-sm-3"></div>
                <div id="myCarousel" class="carousel slide" >
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <c:forEach items="${book.imageList}" varStatus="vs">
                            <li data-target="#myCarousel" data-slide-to="${vs.index}"></li>
                        </c:forEach>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner" >
                        <c:forEach items="${book.imageList}" var="v">
                            <div class="item" >
                                <img style="margin: 0 auto;" width="220px" height="300px" src='/images/@l${v}'  alt="暂无图片">
                            </div>
                        </c:forEach>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="carousel-control left" href="#myCarousel"
                       data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel"
                       data-slide="next">&rsaquo;</a>
                </div>
                <div style="text-align: center; margin-top:40px;">
                    <button id="reportBtn" type="button" class="hidden btn btn-info btn-lg">举报该书</button>
                </div>
            </div>

            <div class="col-sm-6" style="padding-top:70px;">
                <form id="createForm" class="form-horizontal" role="form" >
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">书名</span>
                        <span class="col-sm-4 display" id="name">${book.name}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">ISBN</span>
                        <span class="col-sm-4 display" id="isbn">${book.isbn}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">作者</span>
                        <span class="col-sm-4 display" id="author">${book.author}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">语言</span>
                        <span class="col-sm-4 display" id="language">${book.bookLanguage.name}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">出版社</span>
                        <span class="col-sm-4 display" id="publishingHouse">${book.publishingHouse}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">出版年份</span>
                        <span class="col-sm-4 display" id="publicationYear">${book.publicationYear}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">价格</span>
                        <span class="col-sm-4 display" id="price" >${book.price} 元</span>
                    </div>
                    <br/>
                    <div class="form-group" >                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">备注</span>
                        <p class="col-sm-8 display">
                            ${book.remark}
                        </p>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">邮箱</span>
                        <span class="col-sm-4 display" id="email" >${book.owner.email}</span>
                    </div>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">联系电话</span>
                        <span class="col-sm-4 display" id="tel" >${profile.tel}</span>
                    </div>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">联系地址</span>
                        <span class="col-sm-4 display" id="address" >${profile.address}</span>
                    </div>
                </form>
            </div>
        </div><!-- /#content -->
        <%@include file="/WEB-INF/jsp/common/component/footer.jsp"%>
    </div><!-- /#wrap -->
    <%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>

    <fieldset id="login" class="hidden">
        <form id="loginForm">
            <input id="username" placeholder="用户名" type="text">
            <div class="sa-input-error"></div>
            <input id="password" placeholder="密码" type="password">
            <div class="sa-input-error"></div>
        </form>
    </fieldset>

    <input id="bookId" type="hidden" value="${book.id}">
    <fieldset id="report" class="hidden">
        <form id="reportForm">
            <input id="reason" placeholder="举报理由" type="text">
            <div class="sa-input-error"></div>
        </form>
    </fieldset>

    <script>
        $(document).ready(function(){
            $("li[data-slide-to='0']").addClass("active");
            $("div[class='item']").first().addClass("active");

            $("#myCarousel").carousel({
                interval: 3000
            });

            $("#reportBtn").click(function(){
                <shiro:guest>
                sweetForm({
                    id: "login",
                    title: "登录",
                    text: "您尚未登录，请先登录",
                    inputPlaceholder: "用户名",
                    formId: "loginForm",
                    callback: function(){
                        if(!hasData($("#username").val()) || !hasData($("#password").val())){
                            swal("有未填写的字段！");
                            return;
                        }
                        $.ajax({
                            url: path + "/login",
                            type: "post",
                            dataType: "json",
                            data: {
                                username: $("#username").val(),
                                password: $("#password").val(),
                                rememberMe: false
                            },
                            success: function(data){
                                if(data.success){
                                    location.reload();
                                } else{
                                    errorMessage(data.msg);
                                    $("#password").val("");
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown){
                                errorMessage("登录失败，错误代码： " + XMLHttpRequest.status);
                            }
                        });
                    }
                });
                </shiro:guest>

                <shiro:user>
                sweetForm({
                    id: "report",
                    title: "举报该书",
                    text: "请填写举报理由",
                    inputPlaceholder: "举报理由",
                    formId: "reportForm",
                    callback: function(){
                        if(!hasData($("#reason").val())){
                            infoMessage("请填写举报理由！");
                            return;
                        }
                        $.ajax({
                            url: path + "/report/create",
                            type: "post",
                            dataType: "json",
                            data: {
                                reason: $("#reason").val(),
                                bookId: $("#bookId").val()
                            },
                            success: function(data){
                                if(data.success){
                                    successMessage("操作成功！");
                                } else{
                                    errorMessage("操作失败，请重试！");
                                    $("#reason").val("");
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown){
                                errorMessage("操作失败，错误代码： " + XMLHttpRequest.status);
                            }
                        });
                    }
                });
                </shiro:user>
            });
        });
        //                swal({
        //                            title: "An input!",
        //                            text: "Write something interesting:",
        //                            type: "input",
        //                            showCancelButton: true,
        //                            closeOnConfirm: false,
        //                            animation: "slide-from-top",
        //                            inputPlaceholder: "Write something"
        //                        },
        //                        function(inputValue){
        //                            if (inputValue === false) return false;
        //
        //                            if (inputValue === "") {
        //                                swal.showInputError("You need to write something!");
        //                                return false
        //                            }
        //
        //                            swal("Nice!", "You wrote: " + inputValue, "success");
        //                        });
    </script>
</body>

</html>

